import {
  useState,
  useEffect,
  useLayoutEffect,
  useCallback,
  useMemo,
} from "react";

// 受控组件：通过 state 和 change 事件来收集表单数据
function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const times = useMemo(() => {
    return count + "次";
  }, [count]);

  // 1. 初始化渲染触发，更新也会触发
  // 相当于 mounted 和 updated
  // useEffect(() => {
  //   console.log("useEffect");
  // });

  // 2. 只会在初始化渲染触发
  // useEffect(() => {
  //   console.log("useEffect");
  // }, []);

  // useLayoutEffect(() => {
  //   console.log("useLayoutEffect");
  // }, [])

  // 3. 初始化渲染触发，当count发送变化时触发
  // useEffect(() => {
  //   console.log("useEffect");
  // }, [count]);

  useEffect(() => {
    // 每次更新时都会后触发
    console.log("useEffect");
    return () => {
      // 每次更新时都会先触发
      // 卸载时，只会触发当前函数
      console.log("useEffect return");
    };
  });

  return (
    <>
      <h1>App</h1>
      <p>{count}</p>
      <button onClick={handleClick}>+</button>
    </>
  );
}

export default App;
